<template>
    <Modal v-model="userInfoActive" title="用户信息">
        <Form :label-width="100">
            <FormItem label="头像">
                <Avatar :src="avatar" />
                <Input v-model="input_avatar" style="width: 355px;" :disabled="!isChangeInfo" @on-enter="avatar=input_avatar"/>
                <p color="red">仅支持外部图片</p>
            </FormItem>
            <FormItem label="用户名">
                <Input v-model="username" :disabled="!isChangeInfo" />
            </FormItem>
        </Form>
        <Modal title="修改密码" v-model="isChangePass">
            <Form :label-width="100">
                <FormItem label="旧密码">
                    <Input v-model="oldPassword" placeholder="请输入旧密码" />
                </FormItem>
                <FormItem label="新密码">
                    <Input v-model="newPassword" placeholder="请输入新密码" />
                </FormItem>
                <FormItem label="确认新密码">
                    <Input v-model="checkNewPassword" placeholder="请再次输入新密码" />
                </FormItem>
            </Form>
            <template #footer>
                <div class="flex_container">
                    <Button @click="handelSubmitPassword" type="info" shape="circle" size="large" class="btn">提交</Button>
                    <Button @click="isChangePass = false" type="error" shape="circle" size="large" class="btn">关闭</Button>
                </div>
            </template>
        </Modal>
        <template #footer>
            <div class="flex_container">
                <Button @click="isChangeInfo = true" v-show="!isChangeInfo" type="info" shape="circle" size="large"
                    class="btn">修改信息</Button>
                <Button @click="handelOpenPassChange" v-show="!isChangePass && !isChangeInfo" type="info" shape="circle"
                    size="large" class="btn">修改密码</Button>
                <Button @click="userInfoActive = false" v-show="!isChangeInfo" type="error" shape="circle" size="large"
                    class="btn">关闭</Button>
                <Button @click="handelSubmitUserInfo" v-show="isChangeInfo" type="success" shape="circle" size="large"
                    class="btn">提交</Button>
                <Button @click="isChangeInfo = false" v-show="isChangeInfo" type="error" shape="circle" size="large"
                    class="btn">取消</Button>
            </div>
        </template>
    </Modal>
    <div class="userinfo-text">
        <!-- {{ user }} -->
        <Avatar v-if="avatar == null" style="background-color: #87d068;margin: 4px;" 
        icon="ios-person" size="large" />
        <Avatar v-if="avatar != null" :src="avatar" size="large"></Avatar>
        <span v-if="username != null" style="margin: 4px;" 
        @click="userInfoActive = true; input_avatar = avatar">用户名：{{ username }}</span>
        <router-link v-if="username == null" style="margin: 4px;" to="/login">请先登录！</router-link>
        <br>
        <Button type="error" class="logout_btn" @click="handleLogout">退出</Button>
    </div>
    <Menu style="margin-top: 120px;overflow: auto;height: 580px;">
        <Submenu v-for="(item) in SiderList" :name="item.title">
            <!-- {{ SiderList }} -->
            <template #title>
                <Icon :type="item.icon_url"></Icon>
                <span>{{ item.title }}</span>
            </template>
            <MenuItem v-for="(opItem) in item.permOptions" :name="opItem.title" 
            @click="goUrl(opItem.url)">
            <Icon :type="opItem.icon_url"></Icon>
            <span>{{ opItem.title }}</span>
            </MenuItem>
        </Submenu>
    </Menu>
</template>

<script>
import { Avatar, FormItem, Modal } from 'view-ui-plus';
export default {
    name: 'sider',
    data() {
        return {
            username: null,
            avatar: null,
            input_avatar: null,
            SiderList: null,
            userInfoActive: false,
            isChangeInfo: false,
            isChangePass: false,
            oldPassword: "",
            newPassword: "",
            checkNewPassword: "",
            changeInfo: {},
        };
    },
    methods: {
        goUrl(url) {
            this.$Notice.info({
                title: "路由跳转",
                desc: "url: " + url
            });
            this.$router.push({ path: url });
        },
        confirm(func) {
            this.$Modal.confirm({
                title: "确认框",
                onOk: func,
            });
        },
        info(message) {
            this.$Notice.info({
                title: "提示",
                desc: message,
            });
        },
        handleLogout() {
            console.log("登出");
            sessionStorage.removeItem("token");
            sessionStorage.removeItem("username");
            sessionStorage.removeItem("avatar");
            this.username = null;
            this.avatar = null;
            this.SiderList = null;
            this.$router.push({ path: "/login" });
        },
        handelOpenPassChange() {
            this.oldPassword = "";
            this.newPassword = "";
            this.checkNewPassword = "";
            this.isChangePass = true;
        },
        handelSubmitUserInfo() {
            this.confirm(() => {
                this.$api.post("index/userInfo", {
                    username: this.username,
                    avatar: this.avatar
                }).then((res) => {
                    this.info(res.msg);
                    if(res.code == 0){
                        this.isChangeInfo = false;
                        this.userInfoActive = false;
                        this.handleLogout();//登出以刷新
                    }
                });
            })
        },
        handelSubmitPassword() {
            this.confirm(() => {
                if (this.oldPassword != "" || this.newPassword != "" || this.checkNewPassword != "") {
                    if (this.newPassword != this.checkNewPassword) this.info("请保证两次密码输入相同");
                    else if (this.oldPassword == "") this.info("旧密码不能为空");
                    else if (this.newPassword == "") this.info("新密码不能为空");
                    else this.$api.post("index/updatePassword", {
                        newPassword: this.newPassword,
                        oldPassword: this.oldPassword,
                    }).then((res) => {
                        this.info(res.msg);
                        this.isChangePass = false;//关闭modal
                        this.userInfoActive = false;
                        this.handleLogout();//登出以刷新
                    })
                }
            })
        },
        renew() {
            console.log("更新");
            if (sessionStorage.getItem("token")) {//当用户存在时
                if (this.SiderList == null) {//边框栏不存在
                    //根据用户token从index/getSider获取后端角色信息并保存
                    this.$api.get("index/getBorder").then((res) => {
                        // console.log(this.SiderList);
                        if (res.code == 0) {
                            this.SiderList = res.data.data;
                            this.username = sessionStorage.getItem("username");
                            this.avatar = sessionStorage.getItem("avatar");
                            // console.log("user: { " + this.username + " , " + this.avatar + " }")
                        }
                        else if (res.code == 401) {//用户验证过期删除本地用户信息
                            sessionStorage.removeItem("username");
                            sessionStorage.removeItem("avatar");
                            sessionStorage.removeItem("token");
                            this.username = null;
                            this.avatar = null;
                        }
                        // console.log(data);
                        this.$forceUpdate();
                    });
                }
            }
            else this.SiderList = null;
        },
    },
    created() {
        this.renew();
        setInterval(this.renew, 2000);
    },
    components: { Avatar, FormItem, Modal }

}
</script>

<style>
.userinfo-container {
    height: 100px;
}

.userinfo-text {
    width: 100%;
    height: 120px;
    float: right;
    background-color: aliceblue;
    padding: 10px;
    border: 1px solid rgba(0, 0, 0, 0.038);
    border-radius: 10px;
}

.logout_btn {
    margin: 4px;
    width: 200px;
}

.flex_container {
    display: flex;
    justify-content: space-around;
}

.btn {
    width: 120px;
}
</style>